<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <video
          src="../assets/video/1.mp4"
          autoplay="autoplay"
          loop="loop"
          poster="../assets/images/1.png"
          muted
        ></video>
      </div>
      <div class="swiper-slide">
        <video
          src="../assets/video/2.mp4"
          autoplay="autoplay"
          loop="loop"
          poster="../assets/images/2.png"
          muted
        ></video>
      </div>
      <div class="swiper-slide">
        <video
          src="../assets/video/3.mp4"
          autoplay="autoplay"
          loop="loop"
          poster="../assets/images/3.png"
          muted
        ></video>
      </div>
      <div class="swiper-slide">
        <video
          src="../assets/video/4.mp4"
          autoplay="autoplay"
          loop="loop"
          poster="../assets/images/4.png"
          muted
        ></video>
      </div>
      <div class="swiper-slide">
        <video
          src="../assets/video/5.mp4"
          autoplay="autoplay"
          loop="loop"
          poster="../assets/images/5.png"
          muted
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "@/assets/Swiper/dist/js/swiper.min.js";
import "@/assets/Swiper/dist/css/swiper.min.css";

export default {
  mounted() {
    var mySwiper = new swiper(".swiper-container", {
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2500,
      autoplayDisableOnInteraction: false,
    });
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 100%;

  .swiper-wrapper {
    width: 100%;

    .swiper-slide {
      width: 100%;
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      video {
        width: 100%;
        height: 500px;
      }
    }
  }
}
</style>